<template>
  <div :style="{display:'flex',flexWrap: 'wrap'}">
    <a-row :style="{width: '100%'}">
      <a-col :span="13" class="col_item">
        <a-card title="系统信息" :body-style="{display: 'flex',flexWrap:'wrap'}" :head-style="{fontSize:'1.7em',display:'flex'}"  :style="{}">
          <span slot="extra" class="card_dec">本日系统信息内容已经更新</span>
          <div class="card_value_title"><div>学生账号数</div><div class="card_value_content">{{ systemMessage.studentCount }}</div></div>
          <div class="card_value_title"><div>老师账号数</div><div class="card_value_content">{{ systemMessage.teacherCount }}</div></div>
          <div class="card_value_title"><div>课程数</div><div class="card_value_content">{{ systemMessage.courseCount }}</div></div>
          <div class="card_value_title"><div>课程组数</div><div class="card_value_content">{{ systemMessage.courseGroupCount }}</div>
          </div><div class="card_value_title"><div>班级数</div><div class="card_value_content">{{ systemMessage.classCount }}</div></div>
          <div class="card_value_title"><div>专业数</div><div class="card_value_content">{{ systemMessage.majorCount }}</div></div>
        </a-card>
      </a-col>
      <a-col :offset="1" :span="10" class="col_item">
        <a-card title="管理员信息"  :head-style="{fontSize:'1.7em',display:'flex'}"  :style="{}">
          <span slot="extra" class="card_dec">本日管理员信息内容已经更新</span>
          <img alt class="admin_logo" :src="adminLogo">
          <div class="admin_name">{{ systemMessage.collegeAdminRecord.name }}</div>
          <div class="admin_text"><a-icon type="user" />{{ systemMessage.collegeAdminRecord.account }}</div>
          <div class="admin_text"><a-icon type="environment" />{{ systemMessage.collegeAdminRecord.college }}</div>
          <div class="admin_text"><span :style="{paddingTop:'0.3em'}">********</span> <a-button type="link" @click="visible=true">修改密码</a-button></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :style="{width: '100%'}">
      <a-card title="管理员权限" :body-style="{display: 'flex',flexWrap:'nowrap',justifyContent:'center'}"  :head-style="{fontSize:'1.7em',display:'flex'}"  :style="{marginTop:'1em'}">
        <span slot="extra" class="card_dec">本日管理员权限已经更新</span>
        <div class="admin_role"><img class="role_icon" :src="icon1" alt><div>用户管理</div></div>
        <div class="admin_role"><img class="role_icon" :src="icon2" alt><div>课程管理</div></div>
        <div class="admin_role"><img class="role_icon" :src="icon3" alt><div>课程组管理</div></div>
        <div class="admin_role"><img class="role_icon" :src="icon4" alt><div>班级管理</div></div>
        <div class="admin_role"><img class="role_icon" :src="icon5" alt><div>专业管理</div></div>
      </a-card>
    </a-row>
<!--    修改密码弹框-->
    <a-modal
        title="修改密码"
        :visible="visible"
        :confirm-loading="false"
        @ok="changePassword"
        @cancel="()=>{this.visible=false}"
    >
      <a-form-model :rules="rules" :ref="pass" :model="pass">
        <a-form-model-item label="请输入原密码" prop="oldPass" has-feedback>
          <a-input v-model="pass.oldPass" type="password"/>
        </a-form-model-item>
        <a-form-model-item label="请输入新密码" prop="newPass" has-feedback>
          <a-input v-model="pass.newPass" type="password"/>
        </a-form-model-item>
        <a-form-model-item label="请重复输入新密码" prop="repeatPass" has-feedback>
          <a-input v-model="pass.repeatPass" type="password"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import adminLogo from 'assets/image/icon1.png'
import Icon1 from 'assets/image/admin/icon1.png'
import Icon2 from 'assets/image/admin/icon2.png'
import Icon3 from 'assets/image/admin/icon3.png'
import Icon4 from 'assets/image/admin/icon4.png'
import Icon5 from 'assets/image/admin/icon5.png'
import { mapGetters } from 'vuex'

export default {
name: "Admin",
  data(){
    let validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('原密码不能为空'))
      }else if(value!== this.adminPassword){
          callback(new Error('原密码错误'))
        }else{
        callback()
      }
    };

    let validateNewPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空'))
      }else{
        callback()
      }
    };

    let validateRepeatPass = (rule, value, callback) => {
      if (value !== this.pass.newPass) {
        callback(new Error('两次密码不一致'))
      }else{
        callback()
      }
    };


    return {
      rules:{
        oldPass: [
          { validator: validateOldPass, trigger: ['change', 'blur'] }
        ],
        newPass: [
          {validator: validateNewPass, trigger:['change', 'blur'] }
        ],
        repeatPass: [
          {validator: validateRepeatPass, trigger: ['change', 'blur']}
        ]
      },
      adminLogo:adminLogo,
      icon1:Icon1,
      icon2:Icon2,
      icon3:Icon3,
      icon4:Icon4,
      icon5:Icon5,
      visible: false,
      pass: {
        oldPass: '',
        newPass: '',
        repeatPass: ''
      }
    }
  },
  computed: {
    // 把getter混入到computed对象中,我们可以直接调用vex里面的内容即可
    ...mapGetters({
      systemMessage: 'access/getSystemMessage',
      adminInfo: 'access/getAdminInfo',
      adminPassword: 'access/adminPassword',
      token:'access/token',
      adminId:'access/adminId'
    })
  },
  mounted() {
    // 获取管理员信息
    this.$store.dispatch('access/updateSystemMessage',this.adminInfo).then(data=>{
      if(data.code===1){
        this.$message.info("数据更新成功")
      }else{
        this.$message.error("数据获取失败")
      }
    }).catch(error=>{
      this.$message.error(error)
    })
  },
  methods:{
    changePassword(){
      this.$refs[this.pass].validate(valid => {
        //表单数据全部验证正确之后，发起请求
        if (valid) {

          this.$store.dispatch('access/changePasswd',{
            token: this.token,
            adminId:this.adminId,
            newPassword:this.pass.newPass
          }).then(msg=>{
            this.$message.success(msg)
            this.visible = false
          }).catch(msg=>{
            this.$message.error(msg)
          })

        } else {
          return false;
        }
      });

    },
  }
}
</script>

<style scoped>
  .card_dec{
    color:#9A9A9A;
    margin-left: 1em;
  }
  .card_value_title{
    width: 33%;
    margin: 2em 0;
  }
  .card_value_content{
    font-size: 2em;
  }
  .admin_logo{
    width: 5em;
    height: 5em;
  }
  .admin_name{
    font-size: 2em;
    font-weight: bold;
    /*margin: 0.4em 0;*/
  }
  .admin_text{
    font-size: 1.2em;
    margin: 0.2em 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .admin_role{
    margin: 0 2em;
    background:#36AAFD ;
    width: 15%;
    padding: 1em;
    color: #ffffff;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
  }
  .role_icon{
    width: 80%;
    /*height: 80%;*/
    margin-bottom: 1em;
  }
</style>
